<template>
  <div>
    <cinemaTop :cinema="cinemaDetial" />
    <div class="box">
      <div class="filters" :style="{'background-image':`url(${nowfilmbc})`}">
    </div>

    </div>
      
    <div class="Filmes"><cinemaBody :films="cinemaFilmes" /></div>
    <div class="times">
      <span @click="getitdate(i)" :class="{'spanactive':(i==filmdate)}" v-for="(i,index) in timearr" :key="index">{{settimes(i)}}</span>
    </div>
    <ul>
      <li class="forlists" v-for="(i,index) in filmedetials" :key="index">
        <div class="fortime"><p>{{setsec(i.showAt)}}</p>{{setsec(i.endAt)}}散场</div>
        <div class="fordet"><p>{{i.filmLanguage}}{{i.imagery}}</p><p>{{i.hallName}}</p></div>
        <div class="price">￥{{i.marketPrice/100}}</div>
        <div class="buy" @click="buyticket(i)">购票</div>
      </li>
    </ul>
  </div>
</template>
<script>
import cinemaTop from "@/components/cinemaDetial/cinemaTop.vue";
import cinemaBody from "@/components/cinemaDetial/cinemaBody.vue";
import { getcinemaname, getcinemafilmes, getfilmedetial } from "@/api";
export default {
  components: {
    cinemaTop,
    cinemaBody
  },
  data() {
    return {
      cinemaId: "",
      cinemaDetial: "", //影院信息
      cinemaFilmes: [], //电影列表
      filmedetials: "", //电影详情
      nowtime: ""
    };
  },
  computed: {
    getfilm(){//获取发送过来的电影信息
      return this.$store.state.sendfilm
    },
    nowfilmbc(){  //当前背景
       var t = this.cinemaFilmes.filter(i => {
        return i.filmId == this.storefilm;
      })[0];
      if (t) {
        return t.poster;
      } //防止空
      return ""
    },
    storefilm() {
      //当前电影id
      return this.$store.state.filmid;
    },
    timearr() {
      //当前电影时间合集
      var t = this.cinemaFilmes.filter(i => {
        return i.filmId == this.storefilm;
      })[0];
      if (t) {
        return t.showDate;
      } //防止空
      return ""; //时间
    },
    filmdate() {
      //电影时间
      if (this.nowtime) {
   
        return this.nowtime;
      } else {
        //不选默认第一个
        // console.log(this.timearr,this.timearr[0])
        return this.timearr[0];
      }
    }
  },
  methods: {
    settimes(i) {
      //根据秒计算时间
      var myDate = new Date();
      myDate.setTime(1000 * i);
      var mytime = `${myDate.getMonth() + 1}月${myDate.getDate()}日`;
      return mytime;
    },
    setsec(i) {
      //计算小时
      var myDate = new Date();
      myDate.setTime(1000 * i);
      var h = myDate.getHours()
      var m = myDate.getMinutes()
      var mytime = `${h<10?'0'+h:h}:${m<10?'0'+m:m}`;
      return mytime;
    },
    getitdate(i) {
      this.nowtime = i;
    },
    buyticket(i){
      this.$router.push(`/tickets/${i.scheduleId}`)
    }
  },
  watch: {
    //监测cinemaid改变
    $route: {
      handler(n, o) {
        this.cinemaId = n.params.cinemaid;
        getcinemaname(this.cinemaId).then(res => {
          this.cinemaDetial = res.data.data.cinema;
        });
        getcinemafilmes(this.cinemaId).then(res => {
          this.cinemaFilmes = res.data.data.films;
        });
      },
      immediate: true,
      deep: true
    },
    filmdate(n, o) {//日期变换变换
      getfilmedetial(this.cinemaId, this.storefilm, this.filmdate).then(res => {
        (this.filmedetials = res.data.data.schedules),
          console.log(res.data.data.schedules);
      });
    },
    storefilm(n, o) {       //电影变换变换
      getfilmedetial(this.cinemaId, this.storefilm, this.filmdate).then(res => {
        (this.filmedetials = res.data.data.schedules),
          console.log(res.data.data.schedules);
      });
    }
  }
};
</script>
<style  scoped>
.times {
  display: flex;
  justify-content: space-evenly;
  align-content: center;
  line-height: 1rem;
  width: 100%;
  margin-top: 0.3rem;
  font-size: 0.3rem;
  height: 1rem;
}
.spanactive{
  color:orange;
}
.forlists {
  height: 1.3rem;
  margin-top: 0.1rem;
}
.forlists div{
  line-height: 0.5rem;
  font-size: 0.3rem;
  float: left;
}
.fortime{
  margin-left: 0.3rem;
  width: 1.8rem;
  overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fordet{
  width: 3rem;
  margin-right: 0.3rem;
    
}
.fordet p{
  width: 2.6rem;
  overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.price{
  width: 0.6rem;
  margin-top: 0.2rem;
  color:red;
}
.buy{
  margin-left:0.5rem;
  padding:0.02rem 0.02rem;
  color:red;
  border:0.01rem solid red;
  border-radius: 0.05rem;
  margin-top:0.2rem;
}
.box{
  height: 3rem;
  overflow: hidden;
  margin-top: 0.6rem;
}
.filters{
  margin:0 auto;
    background-size: 100%;
     filter: blur(0.3rem);
     overflow: hidden;
     height: 3.2rem;
}
.Filmes{
  width: 100%;
  position: absolute;
  top:3rem;
}
</style>